<template>
	<div style="width: 100%;height: 100%;" id="bmap"></div>
</template>

<script>
	export default {
		name: 'bmap',
		props:["city"],
		data() {
			return {
				map:null,
				zoom:null,
				placename:'',
				// city:'',
			}
		},
		mounted(){
			this.map = new BMap.Map("bmap");
			var point = new BMap.Point(110.270263, 35.399673);
			this.map.centerAndZoom(point, 6);
			this.map.setMapStyle({
			            style: 'midnight'
			        });

			//启用滚轮缩放
			this.map.enableScrollWheelZoom(); 
			this.map.enableInertialDragging();
			this.map.enableContinuousZoom();
			this.getBoundary()
		},
		methods: {
			getBoundary(){      
				const that=this
			    var bdary = new BMap.Boundary();
			    // var name = document.getElementById("districtName").value;
				var name;
				if(this.city.length==undefined){
					name=''
				}else if(this.city.length>2){
					name=this.city[0].label+this.city[1].label+this.city[2].label
					var allname=''
					for(let i=0;i<this.city.length;i++){
						allname+=this.city[i].label
					}
					var local = new BMap.LocalSearch(this.map, {
							renderOptions:{map: this.map}
						});
						local.search(allname);
				}else{
					name=this.city[this.city.length-1].label
				}
			    bdary.get(name, function(rs){       //获取行政区域
			        that.map.clearOverlays();        //清除地图覆盖物       
			        var count = rs.boundaries.length; //行政区域的点有多少个
			        for(var i = 0; i < count; i++){
			            var ply = new BMap.Polygon(rs.boundaries[i], 
			                      {strokeWeight: 2, //设置多边形边线线粗
			                       strokeOpacity: 1, //设置多边形边线透明度0-1
			                       StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
			                       strokeColor: "#0072E3", //设置多边形边线颜色
								   fillColor: "#00ffff", //设置多边形填充颜色
								   fillOpacity:0.1 //设置多边形填充颜色透明度0-1
			                                       }); //建立多边形覆盖物
			            that.map.addOverlay(ply);  //添加覆盖物
			            that.map.setViewport(ply.getPath());    //调整视野         
			        }                
			    });   
			}	
				
		},
		watch:{
			city(newval,oldval){
				this.getBoundary()
				// console.log(newval)
			}
		},
		created () {
		
		}
	}
</script>

<style>

</style>
